*{
	margin: 0;
	padding: 0;
	border: 0;
}

body{
	background-color: #fff;
}

.text-center{
	padding-top: 200px;
}

.LoginBox{
	width: 714px;
	margin: 0 auto;
	background-color: #fff;
	border-radius: 40px;
	padding: 60px;
}

/*动画地图图标样式代码*/
#HtmlTags{
	position: relative;
}
.pin { 
  width: 30px; 
  height: 30px; 
  border-radius: 50% 50% 50% 0; 
  /*background: #26c7fc; */
  background: #FE0225; 
  position: absolute; 
  -webkit-transform: rotate(-45deg); 
  -moz-transform: rotate(-45deg); 
  -o-transform: rotate(-45deg); 
  -ms-transform: rotate(-45deg); 
  transform: rotate(-45deg); 
  left: 50%; 
  top: 50%; 
  margin: -20px 0 0 -20px; 
  -webkit-animation-name: bounce; 
  -moz-animation-name: bounce; 
  -o-animation-name: bounce; 
  -ms-animation-name: bounce; 
  animation-name: bounce; 
  -webkit-animation-fill-mode: both; 
  -moz-animation-fill-mode: both; 
  -o-animation-fill-mode: both; 
  -ms-animation-fill-mode: both; 
  animation-fill-mode: both; 
  -webkit-animation-duration: 1s; 
  -moz-animation-duration: 1s; 
  -o-animation-duration: 1s; 
  -ms-animation-duration: 1s; 
  animation-duration: 1s; 
} 
.pin:after { 
  content: ''; 
  width: 14px; 
  height: 14px; 
  margin: 8px 0 0 8px; 
  /*background: #2f2f2f; */
  background: #FFFFFF;
  position: absolute; 
  border-radius: 50%; 
} 
.pulse { 
  background: rgba(0,0,0,0.2); 
  border-radius: 50%; 
  height: 14px; 
  width: 14px; 
  position: absolute; 
  left: 50%; 
  top: 50%; 
  margin: 11px 0px 0px -12px; 
  -webkit-transform: rotateX(55deg); 
  -moz-transform: rotateX(55deg); 
  -o-transform: rotateX(55deg); 
  -ms-transform: rotateX(55deg); 
  transform: rotateX(55deg); 
  z-index: -2; 
} 
.pulse:after { 
  content: ""; 
  border-radius: 50%; 
  height: 40px; 
  width: 40px; 
  position: absolute; 
  margin: -13px 0 0 -13px; 
  -webkit-animation: pulsate 1s ease-out; 
  -moz-animation: pulsate 1s ease-out; 
  -o-animation: pulsate 1s ease-out; 
  -ms-animation: pulsate 1s ease-out; 
  animation: pulsate 1s ease-out; 
  -webkit-animation-iteration-count: infinite; 
  -moz-animation-iteration-count: infinite; 
  -o-animation-iteration-count: infinite; 
  -ms-animation-iteration-count: infinite; 
  animation-iteration-count: infinite; 
  opacity: 0; 
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; 
  filter: alpha(opacity=0); 
  -webkit-box-shadow: 0 0 1px 2px #FE0225; 
  box-shadow: 0 0 1px 2px #FE0225; 
  -webkit-animation-delay: 1.1s; 
  -moz-animation-delay: 1.1s; 
  -o-animation-delay: 1.1s; 
  -ms-animation-delay: 1.1s; 
  animation-delay: 1.1s; 
} 
@-moz-keyframes pulsate { 
  0% { 
    -webkit-transform: scale(0.1, 0.1); 
    -moz-transform: scale(0.1, 0.1); 
    -o-transform: scale(0.1, 0.1); 
    -ms-transform: scale(0.1, 0.1); 
    transform: scale(0.1, 0.1); 
    opacity: 0; 
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; 
    filter: alpha(opacity=0); 
  } 
  50% { 
    opacity: 1; 
    -ms-filter: none; 
    filter: none; 
  } 
  100% { 
    -webkit-transform: scale(1.2, 1.2); 
    -moz-transform: scale(1.2, 1.2); 
    -o-transform: scale(1.2, 1.2); 
    -ms-transform: scale(1.2, 1.2); 
    transform: scale(1.2, 1.2); 
    opacity: 0; 
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; 
    filter: alpha(opacity=0); 
  } 
} 
@-webkit-keyframes pulsate { 
  0% { 
    -webkit-transform: scale(0.1, 0.1); 
    -moz-transform: scale(0.1, 0.1); 
    -o-transform: scale(0.1, 0.1); 
    -ms-transform: scale(0.1, 0.1); 
    transform: scale(0.1, 0.1); 
    opacity: 0; 
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; 
    filter: alpha(opacity=0); 
  } 
  50% { 
    opacity: 1; 
    -ms-filter: none; 
    filter: none; 
  } 
  100% { 
    -webkit-transform: scale(1.2, 1.2); 
    -moz-transform: scale(1.2, 1.2); 
    -o-transform: scale(1.2, 1.2); 
    -ms-transform: scale(1.2, 1.2); 
    transform: scale(1.2, 1.2); 
    opacity: 0; 
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; 
    filter: alpha(opacity=0); 
  } 
} 
@-o-keyframes pulsate { 
  0% { 
    -webkit-transform: scale(0.1, 0.1); 
    -moz-transform: scale(0.1, 0.1); 
    -o-transform: scale(0.1, 0.1); 
    -ms-transform: scale(0.1, 0.1); 
    transform: scale(0.1, 0.1); 
    opacity: 0; 
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; 
    filter: alpha(opacity=0); 
  } 
  50% { 
    opacity: 1; 
    -ms-filter: none; 
    filter: none; 
  } 
  100% { 
    -webkit-transform: scale(1.2, 1.2); 
    -moz-transform: scale(1.2, 1.2); 
    -o-transform: scale(1.2, 1.2); 
    -ms-transform: scale(1.2, 1.2); 
    transform: scale(1.2, 1.2); 
    opacity: 0; 
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; 
    filter: alpha(opacity=0); 
  } 
} 
@keyframes pulsate { 
  0% { 
    -webkit-transform: scale(0.1, 0.1); 
    -moz-transform: scale(0.1, 0.1); 
    -o-transform: scale(0.1, 0.1); 
    -ms-transform: scale(0.1, 0.1); 
    transform: scale(0.1, 0.1); 
    opacity: 0; 
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; 
    filter: alpha(opacity=0); 
  } 
  50% { 
    opacity: 1; 
    -ms-filter: none; 
    filter: none; 
  } 
  100% { 
    -webkit-transform: scale(1.2, 1.2); 
    -moz-transform: scale(1.2, 1.2); 
    -o-transform: scale(1.2, 1.2); 
    -ms-transform: scale(1.2, 1.2); 
    transform: scale(1.2, 1.2); 
    opacity: 0; 
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; 
    filter: alpha(opacity=0); 
  } 
} 
@-moz-keyframes bounce { 
  0% { 
    opacity: 0; 
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; 
    filter: alpha(opacity=0); 
    -webkit-transform: translateY(-2000px) rotate(-45deg); 
    -moz-transform: translateY(-2000px) rotate(-45deg); 
    -o-transform: translateY(-2000px) rotate(-45deg); 
    -ms-transform: translateY(-2000px) rotate(-45deg); 
    transform: translateY(-2000px) rotate(-45deg); 
  } 
  60% { 
    opacity: 1; 
    -ms-filter: none; 
    filter: none; 
    -webkit-transform: translateY(30px) rotate(-45deg); 
    -moz-transform: translateY(30px) rotate(-45deg); 
    -o-transform: translateY(30px) rotate(-45deg); 
    -ms-transform: translateY(30px) rotate(-45deg); 
    transform: translateY(30px) rotate(-45deg); 
  } 
  80% { 
    -webkit-transform: translateY(-10px) rotate(-45deg); 
    -moz-transform: translateY(-10px) rotate(-45deg); 
    -o-transform: translateY(-10px) rotate(-45deg); 
    -ms-transform: translateY(-10px) rotate(-45deg); 
    transform: translateY(-10px) rotate(-45deg); 
  } 
  100% { 
    -webkit-transform: translateY(0) rotate(-45deg); 
    -moz-transform: translateY(0) rotate(-45deg); 
    -o-transform: translateY(0) rotate(-45deg); 
    -ms-transform: translateY(0) rotate(-45deg); 
    transform: translateY(0) rotate(-45deg); 
  } 
} 
@-webkit-keyframes bounce { 
  0% { 
    opacity: 0; 
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; 
    filter: alpha(opacity=0); 
    -webkit-transform: translateY(-2000px) rotate(-45deg); 
    -moz-transform: translateY(-2000px) rotate(-45deg); 
    -o-transform: translateY(-2000px) rotate(-45deg); 
    -ms-transform: translateY(-2000px) rotate(-45deg); 
    transform: translateY(-2000px) rotate(-45deg); 
  } 
  60% { 
    opacity: 1; 
    -ms-filter: none; 
    filter: none; 
    -webkit-transform: translateY(30px) rotate(-45deg); 
    -moz-transform: translateY(30px) rotate(-45deg); 
    -o-transform: translateY(30px) rotate(-45deg); 
    -ms-transform: translateY(30px) rotate(-45deg); 
    transform: translateY(30px) rotate(-45deg); 
  } 
  80% { 
    -webkit-transform: translateY(-10px) rotate(-45deg); 
    -moz-transform: translateY(-10px) rotate(-45deg); 
    -o-transform: translateY(-10px) rotate(-45deg); 
    -ms-transform: translateY(-10px) rotate(-45deg); 
    transform: translateY(-10px) rotate(-45deg); 
  } 
  100% { 
    -webkit-transform: translateY(0) rotate(-45deg); 
    -moz-transform: translateY(0) rotate(-45deg); 
    -o-transform: translateY(0) rotate(-45deg); 
    -ms-transform: translateY(0) rotate(-45deg); 
    transform: translateY(0) rotate(-45deg); 
  } 
} 
@-o-keyframes bounce { 
  0% { 
    opacity: 0; 
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; 
    filter: alpha(opacity=0); 
    -webkit-transform: translateY(-2000px) rotate(-45deg); 
    -moz-transform: translateY(-2000px) rotate(-45deg); 
    -o-transform: translateY(-2000px) rotate(-45deg); 
    -ms-transform: translateY(-2000px) rotate(-45deg); 
    transform: translateY(-2000px) rotate(-45deg); 
  } 
  60% { 
    opacity: 1; 
    -ms-filter: none; 
    filter: none; 
    -webkit-transform: translateY(30px) rotate(-45deg); 
    -moz-transform: translateY(30px) rotate(-45deg); 
    -o-transform: translateY(30px) rotate(-45deg); 
    -ms-transform: translateY(30px) rotate(-45deg); 
    transform: translateY(30px) rotate(-45deg); 
  } 
  80% { 
    -webkit-transform: translateY(-10px) rotate(-45deg); 
    -moz-transform: translateY(-10px) rotate(-45deg); 
    -o-transform: translateY(-10px) rotate(-45deg); 
    -ms-transform: translateY(-10px) rotate(-45deg); 
    transform: translateY(-10px) rotate(-45deg); 
  } 
  100% { 
    -webkit-transform: translateY(0) rotate(-45deg); 
    -moz-transform: translateY(0) rotate(-45deg); 
    -o-transform: translateY(0) rotate(-45deg); 
    -ms-transform: translateY(0) rotate(-45deg); 
    transform: translateY(0) rotate(-45deg); 
  } 
} 
@keyframes bounce { 
  0% { 
    opacity: 0; 
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; 
    filter: alpha(opacity=0); 
    -webkit-transform: translateY(-2000px) rotate(-45deg); 
    -moz-transform: translateY(-2000px) rotate(-45deg); 
    -o-transform: translateY(-2000px) rotate(-45deg); 
    -ms-transform: translateY(-2000px) rotate(-45deg); 
    transform: translateY(-2000px) rotate(-45deg); 
  } 
  60% { 
    opacity: 1; 
    -ms-filter: none; 
    filter: none; 
    -webkit-transform: translateY(30px) rotate(-45deg); 
    -moz-transform: translateY(30px) rotate(-45deg); 
    -o-transform: translateY(30px) rotate(-45deg); 
    -ms-transform: translateY(30px) rotate(-45deg); 
    transform: translateY(30px) rotate(-45deg); 
  } 
  80% { 
    -webkit-transform: translateY(-10px) rotate(-45deg); 
    -moz-transform: translateY(-10px) rotate(-45deg); 
    -o-transform: translateY(-10px) rotate(-45deg); 
    -ms-transform: translateY(-10px) rotate(-45deg); 
    transform: translateY(-10px) rotate(-45deg); 
  } 
  100% { 
    -webkit-transform: translateY(0) rotate(-45deg); 
    -moz-transform: translateY(0) rotate(-45deg); 
    -o-transform: translateY(0) rotate(-45deg); 
    -ms-transform: translateY(0) rotate(-45deg); 
    transform: translateY(0) rotate(-45deg); 
  } 
}


.region-list{position:absolute;left:0;top:0}

@-webkit-keyframes warn{
0%{-webkit-transform:scale(0);transform:scale(0);opacity:1}
100%{-webkit-transform:scale(1);transform:scale(1);opacity:0}
}
@-moz-keyframes warn{
0%{-moz-transform:scale(0);transform:scale(0);opacity:1}
100%{-moz-transform:scale(1);transform:scale(1);opacity:0}
}
@-o-keyframes warn{
0%{-o-transform:scale(0);transform:scale(0);opacity:1}
100%{-o-transform:scale(1);transform:scale(1);opacity:0}
}
@keyframes warn{
0%{-webkit-transform:scale(0);-moz-transform:scale(0);-o-transform:scale(0);transform:scale(0);opacity:1}
100%{-webkit-transform:scale(1);-moz-transform:scale(1);-o-transform:scale(1);transform:scale(1);opacity:0}
}
.area-box .dot{position:absolute;left:0;width:10px;height:10px;-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;background:#a2a9b4;opacity:1;filter:alpha(opacity=100)}
.area-box .pulse{position:absolute;top:-28px;left:-28px;height:66px;width:66px;border:2px solid #b7b7b7;-webkit-border-radius:48px;-moz-border-radius:48px;border-radius:48px;-webkit-box-shadow:0 0 4px #82878f,0 0 10px #82878f inset;-moz-box-shadow:0 0 4px #82878f,0 0 10px #82878f inset;box-shadow:0 0 4px #82878f,0 0 10px #82878f inset;opacity:.12;filter:alpha(opacity=0);-webkit-animation:warn 2s ease-out both;-moz-animation:warn 2s ease-out both;-o-animation:warn 2s ease-out both;animation:warn 2s ease-out both;-webkit-animation-iteration-count:infinite;-moz-animation-iteration-count:infinite;-o-animation-iteration-count:infinite;animation-iteration-count:infinite;background:0 0}
.area-box .delay-01{-webkit-animation-delay:0;-moz-animation-delay:0;-o-animation-delay:0;animation-delay:0}
.area-box .delay-02{-webkit-animation-delay:.4s;-moz-animation-delay:.4s;-o-animation-delay:.4s;animation-delay:.4s}
.area-box .delay-03{-webkit-animation-delay:.8s;-moz-animation-delay:.8s;-o-animation-delay:.8s;animation-delay:.8s}
.area-box .delay-04{-webkit-animation-delay:1.2s;-moz-animation-delay:1.2s;-o-animation-delay:1.2s;animation-delay:1.2s}
.area-box .delay-05{-webkit-animation-delay:1.6s;-moz-animation-delay:1.6s;-o-animation-delay:1.6s;animation-delay:1.6s}
.area-box .delay-06{-webkit-animation-delay:2s;-moz-animation-delay:2s;-o-animation-delay:2s;animation-delay:2s}
.area-box .delay-07{-webkit-animation-delay:2.4s;-moz-animation-delay:2.4s;-o-animation-delay:2.4s;animation-delay:2.4s}
.area-box .delay-08{-webkit-animation-delay:-.4s;-moz-animation-delay:-.4s;-o-animation-delay:-.4s;animation-delay:-.4s}
.area-box .delay-09{-webkit-animation-delay:-.8s;-moz-animation-delay:-.8s;-o-animation-delay:-.8s;animation-delay:-.8s}
.area-box .delay-10{-webkit-animation-delay:-1.2s;-moz-animation-delay:-1.2s;-o-animation-delay:-1.2s;animation-delay:-1.2s}
.area-box .delay-11{-webkit-animation-delay:4s;-moz-animation-delay:4s;-o-animation-delay:4s;animation-delay:4s}
.region-list.active .area-box .dot{background:#009fd9}
.region-list.active .area-box .pulse{border-color:#009fd9;top:-39px;left:-39px;height:88px;width:88px;-webkit-box-shadow:0 0 12px #0080d9,0 0 20px #0080d9 inset;-moz-box-shadow:0 0 12px #0080d9,0 0 20px #0080d9 inset;box-shadow:0 0 12px #0080d9,0 0 20px #0080d9 inset}
.region-list.waite .area-box .dot{background:#f90}
.region-list.waite .area-box .pulse{border-color:#f90}
.show-regin{position:absolute;left:2px;height:0;top:0;width:11px;opacity:0;-o-transition:all .5s ease-in-out;-webkit-transition:all .5s ease-in-out;-moz-transition:all .5s ease-in-out;transition:all .5s ease-in-out}
.online-node .show-regin,.region-list:hover .show-regin,.underline-node .show-regin,.waite-node .show-regin{height:127px;opacity:1}
.show-regin span{width:80px;position:absolute;left:8px;top:-11px;padding:6px 10px;font-size:14px;color:#ccc;-moz-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;text-align:center;white-space:nowrap;}

.area-box{z-index:77}
.show-regin{z-index:66}
.region-list.active .show-regin span{position:relative;color:#ccc}
.region-list.waite .show-regin span{color:#ccc}
.postition-4{left:473px;top:348px}